import React, { Component } from 'react'
import { SearchOutline,RightOutline } from 'antd-mobile-icons'
import { Carousel } from 'antd';
import Fast from '../image/3.gif'
import Look from '../image/4.gif'
import tit1 from '../image/5.gif'
import tit2 from '../image/6.gif'
import tit3 from '../image/7.gif'
import tit4 from '../image/8.gif'
import tit5 from '../image/9.gif'
import tit6 from '../image/10.gif'
import tit7 from '../image/11.gif'
import tit8 from '../image/12.gif'


export default class home extends Component {
    

    state = {
        contentStyle: {
            height: '160px',
            color: '#fff',
            lineHeight: '160px',
            textAlign: 'center',
            background: '#364d79',
        },
        titList2: [
            {
                url: tit1,
                name: '找医院'
            },
            {
                url: tit2,
                name: '名院专家'
            },
            {
                url: tit3,
                name: '快速购药'
            },
            {
                url: tit4,
                name: '图文急诊'
            },
            {
                url: tit5,
                name: '快捷电话'
            }
        ]
    }

    render() {
        const { contentStyle, titList2 } = this.state
        return (
            <div className="home">
                <div className="top-input">
                    <span><SearchOutline /></span>
                    <input type="text" placeholder='甲状腺' />
                </div>
                <div className="carousel">
                    <Carousel autoplay>
                        <div>
                            <h3 style={contentStyle}>
                                <img src="https://pic54.photophoto.cn/20200217/0017029505815452_b.jpg" alt="" />
                            </h3>
                        </div>
                        <div>
                            <h3 style={contentStyle}>
                                <img src="https://img.tukuppt.com/ad_preview/00/09/01/5c990e573d984.jpg!/fw/980" alt="" />
                            </h3>
                        </div>
                        <div>
                            <h3 style={contentStyle}>
                                <img src="https://img.tukuppt.com/ad_preview/00/06/22/5c98ea64c1b03.jpg!/fw/980" alt="" />
                            </h3>
                        </div>
                        <div>
                            <h3 style={contentStyle}>
                                <img src="https://img.zcool.cn/community/01f41357a465180000018c1b3cabc8.jpg@1280w_1l_2o_100sh.jpg" alt="" />
                            </h3>
                        </div>
                    </Carousel>
                </div>
                <div className="tit1">
                    <img src={Fast} alt="" />
                    <img src={Look} alt="" />
                </div>
                <div className="tit2">
                    {
                        titList2 ? titList2.map((item, index) => {
                            return <dl key={index}>
                                <dt><img src={item.url} alt="" /></dt>
                                <dd>{item.name}</dd>
                            </dl>
                        }):null
                    }
                </div>
                <div className="tit3">
                    <p><span>美洽活动</span>世界骨关节炎日,专家在线免费义诊</p>
                </div>
                <div className="medicine">
                    <p>
                        &nbsp;&nbsp;科普用药
                        <span>查看全部<RightOutline /></span>
                    </p>
                </div>
                <div className="advertising">
                    <div className="g1">
                        <img src={tit6} alt=""/>
                    </div>
                    <div className="g2">
                    <img src={tit7} alt=""/>
                    </div>
                    <div className="g3">
                    <img src={tit8} alt=""/>
                    </div>
                </div>
            </div>
        )
    }
}


